<html>
  <head>
    <title>Demo leaflet.TileLayer.WMTS</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="../lib/leaflet/leaflet.css" />
    <script src="../lib/leaflet/leaflet.js"></script>
    <script src="../lib/proj4-src.js"></script>
    <script src="../lib/leaflet/proj4leaflet.js"></script>
  </head>

  <body>
    <div id="map" style="height: 100%; width: 100%"></div>
    <script>
      var crs = new L.Proj.CRS(
        "EPSG:900913",
        "+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs",
        {
          resolutions: (function () {
            level = 19;
            var res = [];
            res[0] = Math.pow(2, 18);
            for (var i = 1; i < level; i++) {
              res[i] = Math.pow(2, 18 - i);
            }
            return res;
          })(),
          origin: [0, 0],
          bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244]),
        }
      );

      var map = L.map("map", {
        crs: crs,
        continuousWorld: true,
        worldCopyJump: false,
      }).setView([23.39552, 116.404], 4);

      // var tileLayer = new L.TileLayer.TileLoad('http://localhost:8080/_alllayers', {
      //     maxZoom: 9,
      //     minZoom: 4
      // });
      var url = "http://111.229.177.115:8080/maptile/{z}/{x}/{y}.jpg";
      //将图层加载到地图上，并设置最大的聚焦还有map样式
      var tileLayer = L.tileLayer(url, {
        maxZoom: 9,
        minZoom: 1,
        tms: true,
      });

      tileLayer.addTo(map);

      var acline330kV = {
        type: "FeatureCollection",
        name: "dcline_1100kV",
        crs: {
          type: "name",
          properties: { name: "urn:ogc:def:crs:OGC:1.3:CRS84" },
        },
        features: [
          {
            type: "Feature",
            count: 1003,
            properties: {
              id: "1100001",
              cus_type: "直流线路",
              voltage_type: "2000",
              state: 1003,
              flag: 0,
              name: "1100kv测试线路1",
            },
            geometry: {
              type: "LineString",
              coordinates: [
                [88.46391800514245, 37.523832277383406],
                [89.59625615560827, 37.29898032856216],
                [90.66568663104823, 37.1487043795695],
                [91.23185570628114, 37.2238797829945],
                [91.70366326897522, 37.09854588335539],
                [92.52146304431166, 37.07345417321435],
                [92.83600141944105, 37.048354157798336],
                [93.33926281964808, 36.922729574275984],
                [93.9997934074198, 36.67085871770702],
                [94.18851643249745, 36.62038522149703],
                [95.69830063311855, 36.16463784396169],
                [96.17010819581263, 36.21540830639639],
                [96.98790797114907, 36.24078119238847],
                [99.0009535719772, 35.91029232910563],
                [99.69293799726185, 35.6039951757778],
                [100.82527614772768, 35.116619363597934],
                [102.36651418586173, 34.755622515963246],
                [103.78193687394399, 34.72977628287226],
                [104.69409816181924, 34.70392196501459],
                [106.01515933736269, 34.72977628287226],
                [109.1290892511437, 34.393040542708476],
                [110.35578891414835, 34.393040542708476],
                [113.97298022813641, 33.92454685747109],
                [114.72787232844695, 33.663152000728516],
                [115.73439512886101, 33.40096050994125],
                [116.23765652906806, 33.24326450896062],
                [116.61510257922333, 33.085283505086466],
                [117.24417932948212, 32.821350365747286],
                [118.18779445487029, 32.76846925118617],
                [119.06850190523262, 32.9798048403184],
                [119.94920935559492, 32.87420001958384],
                [119.94920935559492, 32.87420001958384],
              ],
            },
          },
        ],
      };
      L.geoJSON(acline330kV).addTo(map);
    </script>
  </body>
</html>
